<template>
  <div>
    <el-table :data="tableApply" tooltip-effect="dark" border size="medium" @row-click="aloneClick"
      :cell-style="cellStyle">
      <el-table-column prop="destroy_no" label="销毁单据编号" align="center"
        :show-overflow-tooltip="true" />
      <el-table-column label="销毁明细" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
          <span>{{row.sample_info_names[0]}}</span>
          <span v-if="row.sample_info_names.length >= 2">等{{row.sample_info_names.length}}个样品</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
          <span v-if="row.created_at">{{dateFormat1('yyyy-mm-dd ',row.created_at)}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="destroy_user_name" label="销毁人" align="center"
        :show-overflow-tooltip="true" />
      <el-table-column prop="creator_name" label="创建人" align="center"
        :show-overflow-tooltip="true" />
      <el-table-column prop="name" label="状态" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
          {{handlStatus(row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" header-align="center">
        <template #default="{row}">
          <!--:disabled="!(userInfo.user.id === row.destroy_user_id)"-->
          <el-button type="text " size="small" v-if="row.status === 2 && userInfo.user.id === row.destroy_user_id"
            @click="handleRecord(row.id)">写销毁记录
          </el-button>
          <!-- :disabled="!(userInfo.user.id === row.supervision_user_id)"-->
          <el-button type="text " size="small" v-if="row.status === 3 && row.supervision_user_id === userInfo.user.id "
            @click="handleDetermine(row.id)">确定
          </el-button>
          <el-button type="text " size="small" v-if="row.destroy_check && row.destroy_check.Cancelable && 
            row.destroy_check.check_creator_id == userInfo.user.id && row.status === 0 "
            @click="cancelOperation(row)">撤销
          </el-button>
          <el-button type="text " size="small" v-if="row.destroy_check && row.destroy_check.Cancelable && 
            row.destroy_check.check_creator_id == userInfo.user.id  && row.status === 6 " @click="handlEdit(row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { sampleConfirm } from "@/api/sampleManagement";

export default {
  name: "apply",
  props: {
    tableApply: {
      type: Array,
      default: function() {
        return [];
      }
    },
    options: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      userInfo: { user: { id: "" } }
    };
  },
  //是计算属性，也可以理解为一个方法。
  computed: {
    handlStatus() {
      return function(val) {
        let a = "";
        this.options.forEach(element => {
          if (val === element.value) {
            a = element.label;
          }
        });
        return a;
      };
    }
  },

  //属性是手动定义的所需监听的值
  watch: {},

  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.userInfo = this.$store.getters.userInfo;
  },

  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},

  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    //查看详情
    aloneClick(row, column, event) {
      if (column.label === "操作") return;
      this.$router.push({
        path: "/sampleManagement/destruction/apply",
        query: { id: row.id }
      });
    },

    //写销毁记录
    handleRecord(id) {
      this.$router.push({
        path: "/sampleManagement/destruction/apply",
        query: { id: id }
      });
    },

    //销毁确定
    handleDetermine(id) {
      sampleConfirm(id).then(res => {
        if (res.code === 200) {
          this.$message.success("确定成功");
          this.$emit("handTable");
        }
      });
    },

    //鼠标huover
    cellStyle(data) {
      return "cursor:pointer;";
    },

    //撤销审批
    cancelOperation(row) {
      const subdata = {
        flow_id: row.destroy_check.id,
        model_type: "RetainDestroy"
      };
      this.$comFun.cancelFunc(subdata)
        .then(() => {
          this.$message({
            type: "success",
            message: "已撤销"
          });
          this.$emit("handTable");
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    //编辑
    handlEdit(row) {
      this.$router.push({
        path: "/sampleManagement/destruction/create",
        query: { s_id: row.id }
      });
    }
  }
};
</script>

<style scoped>
/* @import url(); 引入css类 */
.el-button--text {
  padding: 0;
}
</style>
